import {defineStore} from 'pinia'
import defaultImg from '@/assets/img/theme/default.png'
import redImg from '@/assets/img/theme/red.png'
import darkImg from '@/assets/img/theme/dark.png'

export enum ThemeType {
    default = 'default',
    dark = 'dark',
    red = 'red',
}

const useSettingStore = defineStore('setting', () => {
    const theme = ref('default')
    const themeList = [
        {
            name: '默认',
            type: ThemeType.default,
            img: defaultImg
        },
        {
            name: '经典红',
            type: ThemeType.red,
            img: redImg
        },
        {
            name: '炫酷黑',
            type: ThemeType.dark,
            img: darkImg
        }
    ]
    watch(theme, () => {
        document.documentElement.className = theme.value
    }, {
        immediate: true
    })


    return {theme, themeList}
}, {
    persist: [
        {
            pick: ['theme'],
            storage: localStorage
        }
    ]
})

export default useSettingStore
